import { Carousel, Popover } from 'antd';
import React, { useState, useEffect } from 'react';
import { replaceImageUrl, replaceContent } from '@/utils';
// css
import styles from '@/styles/CommonDetail.module.scss';
// 组件
import Coupon from '@/pages_components/detail/Coupon';

export default function ProductInfo({ data: { name, imgs, goodsName, location, description, products, coupons, algorithms } }) {

    const [price, setPrice] = useState(0);
    const [autoplay, setAutoplay] = useState(true);
    const [showCoupon, setShowCoupon] = useState(false);
    
    useEffect(() => {
        if(imgs.length && imgs[0].includes('.mp4')){
            setAutoplay(false)
        }
        if(coupons?.activityRuleDTOList?.length || coupons?.couponDTOList?.length){
            setShowCoupon(true)
        }
        if(products.length){
            setPrice(algorithms == 2 ? products[0].salePrice : products[0].showPrice);
        }
    }, []);

    // 切换slider时，停止video播放
    function afterChange() {
        const videos = document.querySelectorAll('video');
        [...videos].forEach(v => {
            v.pause()
        })
    }

    return (
        <div className={[styles['product'], showCoupon && styles['product-coupon']].join(' ')}>
            <div className={[styles['product-left'], !autoplay ? styles['video']:''].join(' ')}>
                {/* 产品图片 */}
                <Carousel autoplay={autoplay} afterChange={afterChange}>
                    {
                        imgs.map((item, index) => {
                            return (
                                <div key={index}>
                                    {
                                        item.includes('.mp4') 
                                        ? <video src={replaceImageUrl(item)} controls loop preload="true"></video>
                                        : <img src={replaceImageUrl(item)} alt="" />
                                    }
                                </div>
                            )
                        })
                    }
                </Carousel>
            </div>
            {/* 产品下单 */}
            <div className={styles['product-right']}>
                <h1>{goodsName}</h1>
                <div className={styles['product-price']}>
                    <span>￥</span>
                    <b>{price}</b>
                    <em>起</em>
                </div>
                { showCoupon && <Coupon coupons={coupons} /> }
                {
                    location ?
                    <div className={styles['location']}>
                        <span>{name}位置：</span>
                        <p>{location}</p>
                    </div> : ""
                }
                <div className={styles['produce']}>
                    <span>{name}介绍：</span>
                    <p>{replaceContent(description) || '--'}</p>
                    <Popover content={<div className={styles['description-popover']}>{replaceContent(description)}</div>} placement="bottomRight" trigger="click">
                        <em className={styles['more']}>查看更多</em>
                    </Popover>
                </div>
            </div>
        </div>
    )
}